<template>
	<view class="u-page">
		<u-scroll-list indicatorWidth="0">
			<view v-for="(item, index) in category" :key="index" @click.stop="handleItemClick(item)"
				:class="{'selected-category': selectedId == item.ID}">
				<view class="category-item">{{ item.CateName }}</view>
			</view>
		</u-scroll-list>

		<u-list @scrolltolower="scrolltolower" class="content-list">
			<u-checkbox-group class="all-handler-box">
				<view class="select-all">
					<u-checkbox :name="'all'" @change="selectAll" :checked="isAllChecked"></u-checkbox>
					<u-cell title="全选"></u-cell>
				</view>
				<u-button type="danger" text="删除" class="del-btn" @click="deleteSelected"></u-button>
			</u-checkbox-group>

			<u-list-item
				style="padding-left: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;">
			</u-list-item>

			<u-checkbox-group v-model="checkboxValue1" @change="checkboxChange" placement="column">
				<u-list-item v-for="(item, index) in infos" :key="index" class="info-item">
					<u-checkbox @change="check(index, item.checked)" :checked="item.checked" :disabled="false"
						:name="index"></u-checkbox>
					<view class="text-container">
						<u-cell class="content" :title="item.interview.content"></u-cell>
						<u-icon v-if="showAnswer == item.ID" name="eye-fill" size="24" @click="handleTextClick(item)"
							class="info-icon"></u-icon>
						<u-icon v-else name="eye-off" size="24" @click="handleTextClick(item)"
							class="info-icon"></u-icon>
					</view>
				</u-list-item>
			</u-checkbox-group>
			<view v-if="noMoreData" class="no-more-data">没有更多数据了</view>
		</u-list>
	</view>
</template>

<script>
	import {
		getUserInterview,
		userInterviewdelete
	} from '@/utils/api/user_interview.js'
	import {
		useranswerList
	} from '../../utils/api/category'
	import {
		getCateGoryListAny
	} from '../../utils/api/category'

	export default {
		data() {
			return {
				infos: [], // 题目列表
				category: [], // 类别
				checkboxValue1: undefined, // 选中的复选框值
				isAllChecked: false, // 全选状态
				selectedId: 0,
				showAnswer: 0,
				noMoreData: false, // Flag for no more data
				page: 1,
				pageSize: 10,
			}
		},
		onLoad() {
			this.getInterview()
			this.userAnswerList()
			this.cateGoryListAny()
		},
		methods: {
			// 加载更多数据
			scrolltolower() {
				if (this.noMoreData) return; // Stop if there's no more data
				this.loadMoreData();
			},
			// Load more data
			loadMoreData() {
				// Check for existing data before loading more
				if (this.infos.length >= 10) { // Assuming a limit of 10
					this.noMoreData = true; // Set to true if all data is loaded
				} else {
					getUserInterview({
						p_id: 1,
						page: this.page,
						page_size: this.pageSize
					}).then(res => {
						if (res.data.code !== 0 || (res.data.data && res.data.data.length === 0)) {
							this.noMoreData = true; // No more data available
						} else {
							this.infos.push(...(res.data.data || []).map(item => ({
								...item,
								checked: false
							})));
						}
					}).catch(error => {
						console.error('Error fetching interview data:', error);
					});
				}
			},
			// 获取面试题数据
			getInterview() {
				getUserInterview({
					p_id: 1,
					page: 0,
					page_size: 2
				}).then(res => {
					if (res.data.code !== 0) return;
					this.infos = (res.data.data || []).map(item => ({
						...item,
						checked: false
					}));
				}).catch(error => {
					console.error('Error fetching interview data:', error);
				});
			},
			// 获取用户回答列表
			userAnswerList() {
				useranswerList({
					p_id: 1
				}).then(res => {
					this.list = res.data.data
				})
			},
			// 获取分类列表
			cateGoryListAny() {
				getCateGoryListAny({
					level: 1
				}).then(res => {
					this.category = res.data.data
				})
			},
			// 点击分类项后重新加载题目列表
			handleItemClick(item) {
				this.isAllChecked = false
				this.selectedId = item.ID
				useranswerList({
					p_id: item.ID
				}).then(res => {
					this.infos = res.data.data.map(item => ({
						...item,
						checked: false
					}));
				});
			},
			// 全选/取消全选
			selectAll() {
				this.isAllChecked = !this.isAllChecked;
				this.infos.forEach(item => item.checked = this.isAllChecked);
				this.$forceUpdate()
			},
			checkboxChange(e) {},
			check(index, checked) {
				this.infos[index].checked = !checked
				this.isAllChecked = this.infos.every(item => item.checked);
			},
			deleteSelected() {
				const selectedIds = this.infos.filter(item => item.checked).map(item => item.ID);
				if (selectedIds.length === 0) {
					alert("请先选择要删除的记录");
					return;
				}
				userInterviewdelete({
					id: selectedIds
				}).then(res => {
					alert(res.data.code == 0 ? "删除成功" : "删除失败");
				})
			},
			handleTextClick(item) {
				this.showAnswer = item.ID
				uni.showModal({
					title: item.interview.content,
					content: item.interview.inter_solution,
					showCancel: false,
					confirmText: '确定',
					success: (res) => {
						this.showAnswer = 0
					}
				});
			}
		}
	}
</script>

<style>
	.u-scroll-list {
		width: auto;
		margin-top: 10rpx;
		padding: 10rpx 0;
		/* 添加上下内边距 */
	}

	.category-item {
		width: 160rpx !important;
		text-align: center;
		margin-left: 10rpx;
		border: 1rpx solid #ddd;
		/* 更柔和的边框颜色 */
		padding: 15rpx 20rpx;
		background-color: #f5f5f5;
		/* 默认背景色 */
		border-radius: 12rpx;
		/* 圆角边框 */
		transition: background-color 0.3s ease, border-color 0.3s ease;
		font-size: 28rpx;
	}

	.selected-category .category-item {
		background-color: #1890ff;
		/* 选中时背景色 */
		color: #fff;
		/* 选中时字体颜色 */
		border-color: #1890ff;
		/* 选中时边框颜色 */
	}

	.info-item {
		padding: 10px 0;
		/* Add vertical padding for spacing */
		display: flex;
		flex-direction: row;
		justify-content: start;
		align-items: center;
	}

	.content-list {
		padding-left: 16rpx;
		box-sizing: border-box;
	}

	.text-container {
		width: 100%;
		/* Or set a specific width */
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* Align items */
		overflow: hidden;
		padding: 5px 10px;
		/* Add padding to the text container */
	}

	.content {
		max-width: 80%;
		width: auto;
		word-wrap: break-word;
	}

	.info-icon {
		margin-left: 10px;
		cursor: pointer;
		align-self: center;
		/* Center the icon vertically */
	}
	
	.all-handler-box{
		width: 100%;
		display: flex;
		justify-content: space-between;
	}
	
	.all-handler-box .select-all {
		width: 200px;
		display: flex;
	}
	u-button{
		width: 100px;
	}
	.all-handler-box .del-btn{
		background-color: rgba(255, 0,0,0.7);
		color: #fff;
	}
</style>